<template>
	<view class="container">
	    <view class="list-header bg-white">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
	        <view class="solid-bottom">
	            <view class="cu-bar search">
	                <view class="search-form round">
	                    <text class="cuIcon-search"></text>
	                    <input type="text" placeholder="搜索设备序列号" v-model="keyword"></input>
	                </view>
	                <view class="action">
	                    <button class="cu-btn bg-orange shadow-blur round" @click="btnSearch()">搜索</button>
	                </view>
	            </view>
	        </view>
	    </view>
		<scroll-view scroll-x="true" class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex?'text-orange cur':''"
					v-for="(item,index) in tabListData" :key="index" @click="bindTabChnage(index)">
				{{item}}
				</view>
			</view>
		</scroll-view>
		<view class="list-body">
			<scroll-view scroll-y @scrolltolower="scrollTolower">
				<view class="cu-card article" v-for="(item,index) in listData" :key="index">
					<view class="cu-item">
						<view @click="toDeviceInfo(item)">
							<view class="title">
								<view class="text-cut text-orange">{{item.deviceSn}}</view>
							</view>
							<view class="content">
								<view class="text-cut">
									<view><text class="tt">设备类型：</text>{{item.deviceTypeName}}</view>
									<view><text class="tt">总卡槽数：</text>{{item.slotTotal}}</view>
									<view><text class="tt">充电宝数量：</text>{{item.portableBatteryCount}}</view>
									<view v-if="item.placeName"><text class="tt">部署网点：</text>{{item.placeName}}</view>
									<view v-if="item.lastLeaseDate"><text class="tt">租借时间：</text>{{item.lastLeaseDate}}</view>
									<view v-if="tabIndex == 0"><text class="tt">设备状态：</text>
										<text :class="item.state == 1?'text-red':''">{{item.stateName}}</text></view>
								</view>
							</view>
							<button class="cu-btn line-orange btn-info"><text class="cuIcon-searchlist"></text></button>
						</view>
					</view>
				</view>
				<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:2,
				tabListData:['全部','离线','在线'],
				
				listData:[],
				keyword:'',
				pageNo:1
			};
		},
		onLoad(option) {
			this._loadListData();
		},
		methods:{
			_loadListData:function(){
				if(this.pageNo > 0){
					const _self = this;
					const api = this.$request;
					api.post(api.url.cdbDevList,{
						trim:this.keyword,
						pageNo:this.pageNo,
						state:this.tabIndex
					},(res)=>{
						console.log(res)
						if(res.code==200){
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = self.pageNo + 1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			bindTabChnage:function(index){
				this.tabIndex = index;
				this.pageNo=1;
				this.listData=[];
				this._loadListData();
			},
			btnSearch:function(){
				this.pageNo=1;
				this.tabIndex = 0;
				this.listData=[];
				this._loadListData();
			},
			toDeviceInfo:function(item){
				uni.navigateTo({
					url:'./info?id='+item.deviceSn
				});
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				this._loadListData();
			}
		}
	}
</script>

<style lang="less">
.list-body scroll-view{height:85vh;}
.list-body .cu-card>.cu-item{position:relative;margin-bottom:0;}
.list-body .cu-card>.cu-item .title{line-height:80rpx;}
.list-body .cu-card>.cu-item .btn-info{position:absolute;top:0;right:0;border:0;font-size:42rpx;}
.list-body .cu-card>.cu-item .btn-info::after{border:0;}
.list-body .cu-card>.cu-item .content{font-size:26rpx;}
.list-body .cu-card>.cu-item .content .tt{min-width:130rpx;display: inline-block;text-align:right;}
</style>
